<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style type="text/css">
			body>div{
				width:200px;
				border: 4px solid #ccc;
				border-radius:4px;
				margin:0 auto;
				overflow: hidden;
				padding-bottom: 4px;
			}
			div>div{
				border: 4px solid #ccc;
				border-radius:4px;
				float: left;
				width:135px;
				height:37px;
				margin:4px 0 0 4px;
				overflow: hidden;
				line-height: 37px;
			}
			input{
				width:45px;
				height:45px;
				border:4px solid #ccc;
				border-radius:4px;
				float: left;
				margin:4px 0 0 4px;
			}
		</style>
		<script type="text/javascript">
			function myfn(str){
				if(str=="C"){
					d1.innerText=" ";
				}else if(str=="="){
					//计算结果并显示
					d1.innerText=eval(d1.innerText);
				}else{//其他数值
					d1.innerText+=str;
				}
			}
		</script>
	</head>
	<body>
		<div>
			<div id="d1"></div>
			<input type="button" value="C" onclick="myfn('C')">
			<input type="button" value="7" onclick="myfn('7')">
			<input type="button" value="8" onclick="myfn('8')">
			<input type="button" value="9" onclick="myfn('9')">
			<input type="button" value="/" onclick="myfn('/')">
			<input type="button" value="4" onclick="myfn('4')">
			<input type="button" value="5" onclick="myfn('5')">
			<input type="button" value="6" onclick="myfn('6')">
			<input type="button" value="*" onclick="myfn('*')">
			<input type="button" value="1" onclick="myfn('1')">
			<input type="button" value="2" onclick="myfn('2')">
			<input type="button" value="3" onclick="myfn('3')">
			<input type="button" value="-" onclick="myfn('-')">
			<input type="button" value="0" onclick="myfn('0')">
			<input type="button" value="." onclick="myfn('.')">
			<input type="button" value="=" onclick="myfn('=')">
			<input type="button" value="+" onclick="myfn('+')">
		</div>
	</body>
</html>
